<template>
	<view class="product-scheduling">
		<HeaderNav bgcolor='#56677c' text='排产' :showNavBackBtn='true' color='#fff'></HeaderNav>
		<view class="container">
			<view class="title">添加排产</view>
			<view class="content">
				<!-- 选择产品 -->
				<!-- <van-cell-group> -->
				  <van-cell title="产品种类">
					<picker @change="bindPickerChange2" class="combox" :range="fiberArr">
						<label class="" v-model="fiberName">{{fiberArr[fiberIndex]}}</label>
					</picker>
				  </van-cell>
				<!-- </van-cell-group> -->
				
				<!-- 单位量的个数 -->
				<van-field
				  :value="scale"
				  :name="scale"
				  label="数量"
				  placeholder="请输入产品的数量"
				  @change="onChangeScale"
				  :rules="[{ required: true, message: '请输入产品单位量的个数' }]"
				/>
				
				<!-- 单位 -->
				<!-- <van-cell-group> -->
				  <van-cell title="单位">
					<picker @change="bindPickerChange1" class="combox" :range="unitArr">
						<label class="" v-model="unitName">{{unitArr[unitIndex]}}</label>
					</picker>
				  </van-cell>
				<!-- </van-cell-group> -->

				<van-cell title="选择日期区间" :value="seldate" @click="onDisplay" />
				<van-calendar
				  :show="dayshow"
				  type="range"
				  allow-same-day="true"
				  @close="dayClose"
				  @confirm="dayConfirm"
				/>

				<view class="submit" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderNav from '@/common/HeaderNav/HeaderNav'
	
	import { getAllGoods as getAllGoodsApi } from '@/api/goods'
	import { addRecord as addRecordApi } from '@/api/emission'
	
	export default {
		data() {
			return {
				fiberArr: [],
				fiberIndex: 0,
				fiberName: '',
				unitArr: ['kg','t','件'],
				unitIndex: 0,
				unitName: '',
				scale: '',
				date: '',
				show: false,
				//日期展示
				dayshow: false,
				//日期值
				seldate: '',
				cid: 0,
				gidArr: [],
				year: 0,
				temp: '',
				startdate: '',
				enddate: '',
				goods:[],
				weight: 0
			}
		},
		onShow() {
			this.cid=this.$store.getters.getUser.cid
			if(this.cid==null || this.cid==0) {
				uni.navigateTo({
					url: '../login/login'
				})
			}else {
				this.__getAllGoods()
				const timeOne = new Date();
				this.year= timeOne.getFullYear();
			}
		},
		methods: {
			async __getAllGoods() {
				const data = {
					cid: this.cid
				}
				
				const res =  await getAllGoodsApi(data)
				if(res.status === this.API_STATUS_CODE.SUCCESS) {
					this.goods=res.data
					this.unitArr[2]=this.goods[0].unit
					for(let i=0; i<res.data.length; i++) {
						let tt=res.data[i].shortName+'('+res.data[i].pid+')';
						this.fiberArr.push(tt);
						this.gidArr.push(res.data[i].gid)
						// console.log(this.gidArr[i])
					}
				}
				
				this.fiberName=this.fiberArr[0]
				this.unitName=this.unitArr[0]
				// console.log(res.data)
			},
			checkEmpty() {
				
				// this.scale=Number(this.scale)
				if(this.fiberName=='' || this.scale=='' || this.unitName=='' || this.seldate=='') {
					return true;
				}else {
					let a=this.seldate.split(" - ");
					this.startdate=a[0].replaceAll("/","-")
					this.enddate=a[1].replaceAll("/","-")
					return false;
				}
			},
			async submit() {
				// this.getWeight()
				// console.log('scale:',this.weight)
				// console.log('goodsweight:',this.goods[this.fiberIndex].weight)
				if(!this.checkEmpty()) {
					// console.log('gid: ',this.gidArr[this.fiberIndex])
					// console.log('填写完成')
					this.getWeight()
					const data = {
						cid: this.cid,
						gid: this.gidArr[this.fiberIndex],
						scale: this.weight,
						startdate: this.startdate,
						enddate: this.enddate
					}
					
					const res = await addRecordApi(data)
					if(res.status == this.API_STATUS_CODE.SUCCESS) {
						uni.showToast({
							icon: 'success',
							title: '添加排产成功',
							duration: 3000
						})
						
						clearTimeout(this.timer); //清除延迟执行 
						  
						this.timer = setTimeout(()=>{  //设置延迟执行
							uni.switchTab({
								url: '../../pages/management/management'
							})
						},2000);
						
						
					}else {
						uni.showToast({
							icon: 'none',
							title: '添加排产失败，请刷新重试',
							duration: 3000
						})
					}
					
				}else {
					uni.showToast({
						icon: 'error',
						title: '请填写完整数据',
						duration: 3000
					})
					
				}
				
				
				console.log(this.fiberName, this.weight, this.unitName , this.startdate, this.enddate);
			},
			getWeight() {
				if(this.unitName == 't') {
					this.weight=Math.floor(this.scale*1000000/this.goods[this.fiberIndex].weight)
				}else if(this.unitName == 'kg'){
					this.weight=Math.floor(this.scale*1000/this.goods[this.fiberIndex].weight)
				}else {
					this.weight=Math.floor(this.scale)
				}
			},
			bindPickerChange1: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.unitIndex = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.unitArr[this.unitIndex]		//将array【改变索引】的值赋给定义的jg变量
				this.unitName=this.unitArr[this.unitIndex]
				// console.log("籍贯为1：",this.fiberIndex)		//输出获取的籍贯值，例如：中国
			},
			bindPickerChange2: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.fiberIndex = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.fiberArr[this.fiberIndex]		//将array【改变索引】的值赋给定义的jg变量
				this.fiberName=this.fiberArr[this.fiberIndex]
				// this.unitArr[2]=this.goods[this.fiberIndex].unit
				// console.log("籍贯为1：",this.fiberIndex)		//输出获取的籍贯值，例如：中国
			},
			onChangeScale(event){
				// console.log(event)
				this.scale=event.detail
			},
			//日期的方法 
			onDisplay() {
				this.dayshow = true
				// console.log(this.dayshow);
			},
 
			dayClose() {
				this.dayshow = false
			},
			formatDate(date) {
			
				date = new Date(date);
				let a=date.getMonth()+1;
				let b=date.getDate();
				
				let a1=a<10? "0"+a : a+"";
				let b1=b<10? "0"+b : b+"";
				let tt=a1+"/"+b1;
				console.log(tt)
				return a1+"/"+b1
			},
			dayConfirm(event) {
				const [start, end] = event.detail;
				this.dayshow = false
				this.seldate = `${this.year}/${this.formatDate(start)} - ${this.year}/${this.formatDate(end)}`	
			},
		},
		components: {
			HeaderNav
		}
	}
</script>

<style lang="less" scoped>
	.product-scheduling {
		width: 100%;
		height: 100vh;
		padding-top: 44rpx;
		box-sizing: border-box;
		// background: linear-gradient(0deg, #021B79, #0b2997, #254dd3);
		background: linear-gradient(to top,#172349,#1d2e55,#203f5f,#4f5e72);
		// background: linear-gradient(to top,#1d2e55,#203f5f,#4f5e72,#68819a);
		
		.container {
			width: 100%;
			// height: 100%;
			
			.title {
				margin: 20rpx;
				margin-top: 40rpx;
				font-size: 38rpx;
				color: #fff;
			}
			
			.content {
				font-size: 40rpx!important;
				box-sizing: border-box;
				
				.submit {
					width: 95%;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					text-align: center;
					color: #fff;
					z-index: 999;
					margin: 100rpx auto;
					border-radius: 80rpx;
					box-sizing: border-box;
					border: 1px solid #fff;
					background-color: rgba(255, 255, 255, 0.1);
				}
			}
		}
	}
</style>